<template>
    <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
        <el-card class="text-center p-6 rounded-lg shadow-xl w-96 bg-white">
            <h1 class="text-6xl font-bold text-primary mb-4">404</h1>
            <p class="text-xl text-gray-500 mb-6">抱歉，页面未找到</p>
            <el-button type="primary" size="large" @click="goHome">返回首页</el-button>
        </el-card>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回首页
const goHome = () => {
    router.push('/')   // 返回到首页
}
</script>

<style scoped>
/* 使用WindiCSS的实用类来控制布局和样式 */
</style>
